// 无状态组件   StatelessComponent
// 慢慢就发展成为函数式组件
// import React from "react"

// interface ChildProps {
//     count: number
// }
// const Child:React.FC<ChildProps> = (props) => {
//     return (
//         <div>Child {props.count}</div>
//     )
// }

// export default Child

import React, { Component, PropsWithChildren } from "react"
interface Props {
    count: number;
}
interface State {

}
class Child extends Component<Props, State> {
    constructor(props: Props) {
        super(props) // 运行基类的constructor 才能成为组件
    }
    // 生命周期函数
    componentDidMount(): void {
        console.log('组件挂载了')
    }
    componentWillUnmount(): void {
        // 对应useEffect return的函数
        console.log('组件卸载了')
    }
    // 组织组件更新
    shouldComponentUpdate() {
        console.log('check是否需要更新')
        if (this.props.count % 2 == 0) {
            return false
        }
        return true
    }
    componentDidUpdate(): void {
        console.log("组件更新了")
    }
    render() {
        const {count} = this.props
        return (
            <div>
                child {count}
            </div>
        )
        
    }
}

export default Child